<template>
    <div>
      <div class="main-tab">
        <x-header id="header" slot="header" :left-options="{showBack: false}" >
          <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
          <span slot="default" class="header-tit">我的需求</span>
        </x-header>
        <div class="main">
          <group>
            <div class="personal" v-for="(item,index) in needlist" :key="item.id" @click="go">
                <div class="personal-msg">
                  <div class="personal-msg-left">
                    <img :src="item.avatar" class="personal-msg-img">
                    <div class="personal-info">
                      <span class="personal-name">{{item.nickname}}</span>
                      <span class="personal-date">{{item.createTime.substring(0,10)}}</span>
                    </div>
                  </div>
                  <div class="personal-msg-right">预算金额：<span>{{item.budget}}</span>元</div>
                </div>
              <div class="personal-describe">{{item.content}}</div>
            </div>
          </group>
        </div>
      </div>
    </div>
</template>

<script>

  import {getUserDemandList} from '@/api/need'
    export default {
        name: "myNeed",
      data(){
          return{
            cid:67,
            needlist:[
            ]
          }
      },
      methods:{
        back(){
          this.$router.go(-1)
        },
        getUserDemandList(){
          getUserDemandList(parseInt(this.cid)).then(res =>{
            console.log(res)
            this.needlist=res.data;
          })
        }
      },
      created(){
          this.getUserDemandList();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .main{
    padding-top:28px;
  }
  .personal{
    height: 7.93rem;
    border-bottom: solid 1px #f5f5f5;
  }
  .personal-msg{
    display: flex;
    justify-content: space-between;
  }
  .personal-msg-right{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    margin-top: 1.07rem;
  }
  .personal-msg-right span{
    font-size: 18px;
    color: #AD2532;
    letter-spacing: -0.43px;
    text-align: justify;
  }
  .personal-msg-left{
    display: flex;
    flex-direction: row;
    margin-left: 1.07rem;
    margin-top: 1.07rem;
  }
  .personal-msg-img{
    width: 3.57rem;
    height: 3.57rem;
    background: #FFFFFF;
    border: 1px solid #F4F4F4;
    border-radius:50%; overflow:hidden;
  }
  .personal-info{
    display: flex;
    flex-direction: column;
    margin-left: 1.07rem;
  }
  .personal-name{
    font-size: 17px;
    color: #030303;
    letter-spacing: -0.41px;
  }
  .personal-date{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
    margin-top: 0.36rem;
  }
  .personal-describe{
    margin-left: 5.71rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    margin-top: 1.08rem;
  }
</style>
